
<!--分页查询共用的页面-->
<%@ include file="/common/paginateUtil.jsp"%>

<%@ include file="/common/dateUtil.jsp"%>
  <%@ page language="java" pageEncoding="UTF-8"%>

	<style>
        select {
			width:80px;
	    }
		.vpic
		{
			height:150px;
		}
		.photoTable 
		{
		   font-size:12px;
		}
		.photoTable img
		{
		    width:96px;
			height:96px;
		}
		img
		{
		   cursor:hand;
		}
		#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
	</style>
	
</head>

<link href="<%=ApplicationPath%>/css/pagination.css" rel="stylesheet" type="text/css" />
    <script src="<%=ApplicationPath%>/js/pagination.js"></script>
<script type="text/javascript" src="<%=ApplicationPath%>/map/BaiduMapHandler.js?v=2"></script>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=${systemConfig.baiduKey}"></script>
<!--测距-->
<script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
<!--拉框放大-->
<script type="text/javascript" src="http://api.map.baidu.com/library/RectangleZoom/1.2/src/RectangleZoom_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="<%=ApplicationPath%>/map/MarkerClusterer.js?v=12"></script>
		<script type="text/javascript" charset="utf-8">
				 var picturePath = "<%=ApplicationPath%>/vehiclePicture/";
			//格式化输出图片列			
			function getPicColumn(value, rowData, rowIndex)
			{  		
					       var fileName = rowData.fileName;
						   var filePath = picturePath + fileName;
						   //alert(entityId);
							var html =  "<img class=vpic src='" +filePath+"';\"/>";
							//alert(html);
						   return html;
			}


			function doPaginate()
			{
				 var queryForm = $("#queryForm").ajaxForm();
				 var formData = queryForm.formToArray();
				 var queryParams = {rows:20};
				 for(var m in formData){
						 queryParams[formData[m].name] = formData[m].value;        
				 }
				 var url = '<%=ApplicationPath%>/report/paginate.action';
				 $.getJSON(url, queryParams, function(data)
				{
					createPaginationBar(url, queryParams,data.total);
				});
				
			}

			function createPaginationBar(url, queryParams,total)
			{
				var pageSize = 30;
				var navDescr = '<span style="color: #3333ff">每页'+pageSize + '条 共'+total+' 条记录</span>';
                if(total == 0)
                {
                    $("#photoTable").html("<tr><td colspan=6 align=center>没有照片</td></tr>");
                    //return;
                }

				$('#pagination_bar').pagination2({
					dataSource: url,
					locator: 'rows',
					showNavigator: true, 
					formatNavigator: navDescr,
					totalNumber: total,
					pageSize: pageSize,
					alias: {
						pageNumber: 'page',
						pageSize: 'rows'
					},
					ajax: {
						data: queryParams  ,
						beforeSend: function() {
							//dataContainer.html('Loading data from flickr.com ...');
							return true;
						}
					},
					callback: function(data, pagination) {
						showPhotos(data);
						// template method of yourself
						//var html = template(data);
						//dataContainer.html(html);
					}
				})
			}
			var OperatorObj = null;
			var photoList = null;
			var picturePath = "<%=ApplicationPath%>/vehiclePicture/";
		    function showPhotos(data)
			{
				photoList = data;
				if(data.length == 0)
				{
				    $("#photoTable").html("<tr><td colspan=6>没有照片</td></tr>");
					return;
				}
				var tableCotent="";
				var row = 0;
				for(var m = 0; m < data.length; m++)
				{
					var photo = data[m];
					if(m == 0)
					{
						viewPic(0);
					}
					if(m % 6 == 0)
					{
						if(row++ > 0)
						{
					       tableCotent += "</tr>";
						}
					    tableCotent += "<tr>";
					}
				    var filePath = picturePath + photo.fileName;
					var mediaId = photo.mediaItemId;
					tableCotent += "<td onclick='viewPic("+ m + ")'> <img class=vpic src='" +filePath +"'/><div>车牌号:"+ photo.plateNo + " </div><div>通道:" + photo.channelId + "</div><div>时间:"+ photo.sendTime+ "</div><td>";
				}				
			    tableCotent += "</tr>";
				$("#photoTable").html(tableCotent);
			}

			function viewPic(index)
			{
				OperatorObj.map.clearOverlays();
				//alert(mediaId);				
				var photo = photoList[index];
				var filePath = picturePath + photo.fileName;
				$("#bigPhoto").attr("src", filePath);
				var latitude = photo.latitude;
				var longitude = photo.longitude;
				if(latitude == null || longitude == null)
				    return;
				
		        var icon = "<%=ApplicationPath%>/image/parking.png";
				OperatorObj.createMarker(longitude, latitude, icon,photo);
				var text = photo.plateNo + ",通道:"+ photo.channelId +  ",拍摄时间:"+ photo.sendTime;
				OperatorObj.createMarkerLabel(photo.mediaItemId, latitude, longitude, text,32);
				
				OperatorObj.setCenter(latitude, longitude, 17);


			}

			function resizeMapWidth()
			{
                var ph = $('body').layout('panel', 'south').panel('options').height;
                //var pw = $('body').layout('panel', 'south').panel('options').width;
				var pw = document.body.clientWidth - 1;
                $("#allmap").css("width", pw - 410);
			}


			var map = null;


			$(document).ready(function() {
                var now = Utility.today(-30);
                $("#startDate").val(now + " 00:00:00");
				   var now = Utility.today(1);
				  $("#endDate").val(now + " 23:59:00");
				  
				//创建下拉部门树
				Utility.createDepTree("depId");

                 $("#alarmType").lookup({category:"alarmType"});
				$("#btnQuery").click(function(){
				        doPaginate();
				});
				doPaginate();
				map = new BMap.Map("allmap");
				  var userInfo = ${onlineUserInfo};//用户设置的地图中心
				map.centerAndZoom(new BMap.Point(userInfo.mapCenterLng, userInfo.mapCenterLat), userInfo.mapLevel);

				OperatorObj = new BaiduMapHandler(map);

                var sz  = new BMap.Size(0,30); //导航条向下偏移
				map.addControl(new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,offset:sz}));  //添加默认缩放平移控件
				map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));     //2D图，卫星图

				map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT}));    //左上角，默认地图控件
				//map.setCurrentCity("北京");   

				map.addControl(new BMap.OverviewMapControl());              //添加默认缩略地图控件
				map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}));                    // 左下
				map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
				map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用

				var myDis = new BMapLib.DistanceTool(map);
			} );
		</script>

<body class="easyui-layout" onresize="resizeMapWidth();">
<div data-options="region:'north',border:'false'" style="height:85px;padding-top:1px;">
			<form id="queryForm" action="<%=ApplicationPath%>/report/paginate.action">
			   <input type="hidden" name="queryId" value="report.selectVehiclePictures" />
			   <input type="hidden" name="fileName" value="历史拍照记录" />	    
			   <input type="hidden" name="codeFormat" value="0" />		 <!-- 0代表照片,只查询照片-->  
			  <table width="100%"  class="TableBlock">
			   			   <tr>
						    <td align="right"> 车牌号码 </td>
					<td>			   
					<input type="text" id="plateNo" name="plateNo" style="width:100px;">
					</td>
				   <td align="right"> 车组名称 </td>
					<td>			   
				<select id="depId" name="depId" style="width:200px;"></select>
               </td>

						
						<td align="right">开始时间
							</td>
						<td >
      <input type="text" name="startDate" id="startDate" class="datetimepicker"></input>
						至
							  <input type="text" name="endDate"  id="endDate"  class="datetimepicker"></input>
						</td>
				
        <td colspan="2" align="left">
		 <a id="btnQuery" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" >查询</a>&nbsp;
		   <a id="btnReset" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-clear'" >重置</a>&nbsp;
		   <a id="btnExport" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-excel'" onclick="Utility.excelExport('<%=ApplicationPath%>/export.action');">导出</a><!--调用utility.js-->

        </td>
    </tr>
		</table>
		</form>

	<div id="pagination_bar"></div>
</div>

<div data-options="region:'center'">
  <table id="photoTable" class="photoTable" style="width:100%;height:200px;">
     

  </table>

</div>

<div data-options="region:'south',border:false,split:true" style="height:260px;">

	<div class="easyui-layout" style="width:100%;height:100%;">

	     <div id="photoContent" data-options="region:'west',border:'false'" style="width:400px;">

			 <img id="bigPhoto" src="" style="width:100%;height:100%;"/>

		  </div>


			  <div id="allmap"  data-options="region:'center',border:'false'"></div>
	</div>

</div>
</body>

